<template>
	<view :class="[config.style]">
		<!--数据列表部分-->
		<view class="list-section uni-clearfix">
			<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="0" :down="downOption" @down="downCallback" @up="upCallback">
				<!-- 数据列表 -->
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index" @click="goToDetailLink(item.roomid)">
						<view class="content">
							<view class="cover">
								<image mode="widthFix" :src="item.share_img" @error="imageError" class="image"></image>
								<view class="status" v-if="item.live_status==101">
									<text class="live-player"></text>
									<text>直播中</text>
								</view>
								<view class="status" v-else>
									小直播
								</view>
							</view>
							<view class="info">
								<view class="title text-ellipsis">{{item.name}}</view>
								<view class="time-str">
									<view class="cn">开播时间：</view>
									<view class="time">{{item.start_time_str}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		
		<uni-popup ref="openQrcode" type="center">
			<view class="open-qrcode">
				<!--小程序直播二维码-->
				<view class="content">
					<view class="title">扫描进入直播间</view>
					<view v-if="cdnUrl">
						<image class="image" :src="cdnUrl" mode="widthFix"></image>
					</view>
					<view v-else>
						加载中...
					</view>
				</view>
				<view class="close-icon" @click="closeQrcode()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {

		},
		data() {
			return {
				list: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
				cdnUrl: '',   // H5端获取小程序直播二维码
			}
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			imageLoad: function(e) {
				//console.log(e.detail)
			},
			//上拉加载的回调
			upCallback: function() {
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = this.page
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/miniprogram_live'
					data.m = 'muu_minishop'
					//#endif
					//#ifdef H5
					url = 'entry/site/miniprogram_live'
					data.m = 'muu_minishop'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							let list = res.data.data.data
							that.list = that.list.concat(list);
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(list.length);
							that.page = that.page + 1
						}
					}
				})
			},
			//下拉刷新
			downCallback: function() {
				let that = this
				this.page = 1
				
				let data = {}
					data.action = 'lists'
					data.page = this.page
				//获取分页列表首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/miniprogram_live'
					data.m = 'muu_minishop'
					//#endif
					//#ifdef H5
					url = 'entry/site/miniprogram_live'
					data.m = 'muu_minishop'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.list = []
							that.list = res.data.data.data
							console.log(that.list)
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(that.list.length);
							that.page = 2
						}
					}
				})
			},
			
			/**
			 * 进入直播间
			 * @param {Object} id
			 */
			goToDetailLink: function(roomId){
				let that = this
				// #ifdef MP-WEIXIN
				let url =  `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				// #endif
				
				// #ifdef H5
				uni.showLoading({
				    title: '加载中'
				});
				let url = ''
					url = 'entry/site/miniprogram_live'
				let data = {}
					data.roomid = roomId
					data.action = 'shared_code'
					data.m = 'muu_minishop'
				this.util.request({
					url : url,
					data : data,
					success(res) {
						console.log(res)
						uni.hideLoading();
						if(res.data.data.errcode){
							uni.showToast({
							    title: '直播间已关闭',
							    duration: 2000,
								icon: 'none'
							});
						}else{
							that.cdnUrl = res.data.data.cdnUrl
							console.log(that.cdnUrl)
							that.showQrcode()
						}
					},
					fail(res) {
						
					}
				})
				// #endif
			},
			
			/**
			 * 弹出小程序二维码
			 * @param {Object} id
			 */
			showQrcode: function(data){
				this.$refs.openQrcode.open()
			},
			
			/**
			 * 关闭小程序二维码
			 */
			closeQrcode: function(){
				this.$refs.openQrcode.close()
			},
		}
	}
</script>

<style lang="scss">
	
	.list-section {
		
		.list {
			
			.item {
				width: 100%;
				.content {
					position: relative;
					min-height: 180rpx;
					margin: 0 10rpx 20rpx 10rpx;
					margin-bottom: 30rpx;
					box-shadow: 0 0 20rpx rgba(0,0,0,.12);
					border-radius: 10rpx;
					overflow: hidden;
					
					.cover {
						position: relative;
						border-radius: 10rpx;
						overflow: hidden;
						z-index: 2;
						.image {
							width: 100%;
							display: block;
						}
						.status {
							position:absolute;
							top: 20rpx;
							right: 20rpx;
							background-color:rgba(0,0,0,.5);
							color:#fff;
							padding: 4rpx 10rpx;
							border-radius:10rpx;
							font-size: 24rpx;
							z-index: 3;
							.live-play {
								display: inline-block;
								width: 6px;
								height: 6px;
								background-color: green;
								border-radius: 50%;
								margin-right: 5px;
								vertical-align: middle;
							}
						}
					}
					.info {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						padding: 20rpx;
						background-color: rgba(255,255,255,0.9);
						z-index: 3;
						.title {
							font-size: 32rpx;
							color: #000;
							font-weight: 700;
							line-height: 80rpx;
						}
						.time-str {
							color: #4d4545;
							font-size: 28rpx;
							.cn {
								display: inline-block;
								height: 32rpx;
								line-height: 32rpx;
							}
							.time {
								display: inline-block;
							}
						}
					}
				}
			}
		}
		
	}
	
	.open-qrcode {
		
		.content {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			width: 480rpx;
			padding: 20rpx;
			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 52rpx;
			}
			.image {
				max-width: 100%;
			}
		}
		.close-icon {
			padding-top: 32rpx;
			text-align: center;
			color: #fff;
			.iconfont {
				font-size: 64rpx;
			}
		}
	}
</style>
